<template>
  <div class="server__content_qs">
    <dl>
      <dt>你可能感兴趣的问题：</dt>
      <dd v-for="q in quetions" :key="q.question" @click="$emit('click-item', q)">
        {{ q.question }}
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'Quetions',
  components: {},
  props: {
    quetions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.server__content_qs {
  margin: 10px 0 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba($color: $color-white, $alpha: 0.1);
  color: rgba($color: $color-white, $alpha: 0.7);
  dt {
    line-height: 1.8;
    margin-bottom: 5px;
  }
  dd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
    margin-bottom: 4px;
    line-height: 1.4;
    cursor: pointer;
    &::before {
      content: '';
      margin-top: 6px;
      flex: 0 0 4px;
      align-self: flex-start;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: rgba($color: $color-white, $alpha: 0.7);
    }
    &:hover {
      color: $color-white;
    }
  }
}
</style>
